<template>
  <div :class="['playPage', { paused: paused }]" v-show="playMusice">
    <audio
      :src="`http://music.163.com/song/media/outer/url?id=${playMusice.id}.mp3`"
      autoplay
      @timeupdate="timeupdate"
      @play="play"
      @pause="pause"
      ref="player"
      @ended="playEnd"
    ></audio>
    <div class="minBar animate__animated animate__fadeInUp" v-if="playMusice">
      <img :src="playMusice.picUrl" alt="" />
      <p @click="isFull = true">
        {{ playMusice.name }}-{{ playMusice.artists[0].name }}
      </p>

      <!-- <router-link :to="`/fullscreen/${playMusice.id}`"> -->
      <!-- <router-link
        :to="{
          name: 'FullScreen',
          params: {
            id: playMusice.id,
            musicname: playMusice,
            time: timeupdate,
            audioDom: audioDom,
          },
        }"
      >
        <p>{{ playMusice.name }}-{{ playMusice.artists[0].name }}</p>
      </router-link> -->
      <div @click="togglePlay" class="toPlay">
        <canvas ref="miniPlay"></canvas>
        <span class="btn"></span>
      </div>
      <!-- <div class="pList">
        <p v-for="item in songMenu" :key="item.id">{{ item.name }}</p>
      </div> -->
    </div>
    <transition
      enter-active-class="animate__animated animate__fadeInUp"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
      <div class="fullScreen" v-show="isFull">
        <!-- <img class="bgg" :src="playMusice.picUrl" alt="" /> -->
        <div class="back" @click="isFull = false"></div>
        <div class="middle">
          <!-- <div class="cons"> -->
          <img :src="playMusice.picUrl" @click="togglePlay" alt="" />
          <div class="txt">
            <h2>{{ playMusice.name }}</h2>
            <p>{{ playMusice.artists[0].name }}</p>
          </div>
          <!-- </div> -->
          <div class="Lyric">
            <ul
              :style="{
                transform: `translateY(-${Litop}px)`,
              }"
            >
              <transition-group>
                <li
                  v-for="(ly, index) in lyric"
                  :key="index"
                  :class="{ lyricLight: index == lyricIndex }"
                  ref="lyricLi"
                >
                  {{ ly.lyric }}
                </li>
              </transition-group>
            </ul>
          </div>
          <div class="control">
            <input
              type="range"
              max="100"
              :value="timeRange?timeRange:0"
              @change="changeTime"
              id="timeRange"
            />
            <div class="btn">
              <div class="mode">
                <!-- <img
                  v-if="indexImg===0"
                  src="../assets/img/single.png"
                  alt=""
                />
                <img
                  v-else-if="indexImg === 1"
                  src="../assets/img/rand.png"
                  alt=""
                />
                <img v-else src="../assets/img/order.png" alt="" /> -->
                <p @click="changeMode" :class="{ single: index == 1 }"></p>
                <p @click="changeMode" :class="{ rand: index == 2 }"></p>
                <p @click="changeMode" :class="{ list: index == 3 }"></p>
              </div>
              <div class="working">
                <a href="#" class="prev" @click="prev"></a>
                <a
                  href="#"
                  :class="[isShow ? 'playing' : 'plays']"
                  @click="togglePlay"
                ></a>
                <a href="#" class="next" @click="next"></a>
              </div>
              <div class="lis">
                <a href="#" @click.stop="isSongs = true"></a>
              </div>
            </div>
          </div>
          <transition
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
          >
            <div class="pList" v-show="isSongs">
              <p
                v-for="(item, index) in songMenu"
                :key="item.id"
                :style="{ color: item.id == playMusice.id ? '#22d59c' : '' }"
                @click="$emit('play', item)"
              >
                {{ item.name }}-{{ item.artists[0].name }}
                <span @click="del(index)" ref="span"></span>
              </p>
              <button @click="isSongs = false"></button>
            </div>
          </transition>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "Play",
  props: {
    playMusice: {
      type: Object,
      default: function () {
        return null;
      },
    },
    songMenu: Array,
  },
  mounted() {},
  watch: {
    playMusice(value) {
      // console.log(value);
      this.getLyric(value.id);
    },
    // indexImg(value) {
    //   console.log(value);
    // },
  },
  data() {
    return {
      paused: false,
      isFull: false,
      // duration: 0,
      // audioDom: null,
      isSongs: false,
      isLyric: false,
      lyric: [],
      timeRange: 0,
      duration: 0,
      isShow: true,
      lyricIndex: 0,
      Litop: 0,
      delArr: [],
      index: 3,
      list: true,
      playMode: "list",
    };
  },
  created() {
    // this.changeMode();
    this.getLyric(this.playMusice.id);
  },
  components: {},
  methods: {
    //删除数组
    del(index) {
      this.songMenu.splice(index, 1);
      this.delArr = this.songMenu;
      this.$emit("del", this.delArr);
      // console.log(this.songMenu);
    },

    //播放模式切换
    changeMode() {
      this.index++;
      if (this.index > 3) {
        this.index = 1;
      }
      if (this.index == 1) {
        this.playMode = "single";
      } else if (this.index == 2) {
        this.playMode = "rand";
      } else {
        this.playMode = "list";
      }
    },
    playEnd(){
      if (this.playMode=='single') {
        this.$refs.player.play();
      }else if(this.playMode=='rand'){
        let randIndex = Math.floor(Math.random() * this.songMenu.length);
        let randMusic = this.songMenu[randIndex];
        this.$emit("play", randMusic);
      }else{
        this.next()
      }
    },


    //上一曲
    prev() {
      let playID = this.playMusice.id;
      let prev = null;
      this.songMenu.filter((d, index) => {
        if (d.id == playID) {
          //找到当前播放音乐
          let i = --index; //上一曲的下标
          if (i < 0) {
            i = this.songMenu.length - 1; //如果上一曲的id是-1
          }
          prev = this.songMenu[i];
        }
      });
      this.$emit("play", prev);
      this.isShow=true;
    },
    //下一曲
    next() {
      let playID = this.playMusice.id;
      let next = null;
      this.songMenu.filter((d, index) => {
        if (d.id == playID) {
          //找到当前播放音乐
          let i = ++index; //上一曲的下标
          if (i > this.songMenu.length - 1) {
            i = 0; //如果下一曲的id是大于歌单长度 取第一首歌曲
          }
          next = this.songMenu[i];
        }
      });
      this.$emit("play", next);
      this.isShow=true;
    },
    drawCircle(currentTime, duration) {
      let canvas = this.$refs.miniPlay;
      let context = canvas.getContext("2d");
      context.clearRect(0, 0, 40, 40); //清除画布上的内容
      context.beginPath();
      context.strokeStyle = "#f1f1f1";
      context.lineWidth = 2; //线宽度
      context.arc(20, 20, 19, 0, 2 * Math.PI);
      context.stroke();
      context.closePath();

      let arcP = (currentTime / duration) * 2 * Math.PI;
      context.beginPath();
      context.strokeStyle = "#fff";
      context.lineWidth = 3; //线宽度
      context.arc(20, 20, 18, 0, arcP);
      context.stroke();
      context.closePath();
    },
    pause() {
      //暂停状态
      this.paused = true;
    },
    play() {
      //播放状态
      this.paused = false;
    },
    togglePlay() {
      //切换播放状态
      let player = this.$refs.player;
      if (this.paused) {
        player.play();
        // console.log("isshow", this.isShow);
        this.isShow = !this.isShow;
      } else {
        player.pause();
        // console.log("----", this.isShow);
        this.isShow = !this.isShow;
      }
    },
    // canPlay: function () {
    //   this.duration = this.$refs.player.duration;
    // },
    changeTime(e) {
      let val = e.target.value;
      let player = this.$refs.player;
      let ctime = (val / 100) * this.duration;
      // console.log(ctime, player);
      player.currentTime = ctime;
    },

    //获取歌词
    getLyric(id) {
      this.$http
        .get("http://music.kele8.cn/lyric", {
          params: {
            id: id,
          },
        })
        .then((d) => {
          // console.log(d);
          let lyric = d.data.lrc.lyric;
          // console.log(lyric);
          //根据换行符切割字符串
          let arr = lyric.split("\n");
          // console.log(arr);
          //弹出最后一个空格 最后符号 \n
          arr.pop();
          //正则里面的[] 表示“或”的意思
          let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
          let arrNew = [];
          for (let i = 0; i < arr.length; i++) {
            let regex = new RegExp(reg);
            if (regex.test(arr[i])) {
              let item = {
                time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
                lyric: RegExp.$3,
              };
              arrNew.push(item);
            }
          }
          this.lyric = arrNew;
        });
    },
    timeupdate(e) {
      let audio = e.target;
      //获取当前播放时间
      let currentTime = audio.currentTime;
      //获取总播放时长
      let duration = audio.duration;
      this.duration = duration;
      this.drawCircle(currentTime, duration);

      // let timeRange = this.$refs.timeRange;
      this.timeRange = (currentTime / duration) * 100;

      // //当前时间与歌曲总时长比例
      // let ratio = currentTime / duration;

      // //进度条 通过设置value的值 更显显示
      // let timeRangeDom = document.getElementById("timeRange");
      // if (timeRangeDom != null) {
      //   timeRangeDom.value = ratio * 100;
      // }

      //歌词滚动
      //当前播放时间
      let time = e.target.currentTime;
      //获取当前歌词里面所有的li元素
      let lyricLi = this.$refs.lyricLi;
      for (var i = 0; i < this.lyric.length; i++) {
        if (i == this.lyric.length - 1) {
          this.lyricIndex = i;
          break;
        }
        if (time >= this.lyric[i].time && time < this.lyric[i + 1].time) {
          this.lyricIndex = i;
          this.Litop = lyricLi[i].offsetTop - 60;
          // console.log('----===',this.Litop);
          break;
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.playPage {
  display: flex;
  flex-direction: column;
  color: #fff;
  .minBar {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 30;
    display: flex;
    // padding: 5px 10px;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to top, rgb(65, 160, 114), rgba(255, 0, 0, 0));
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      animation: rangImg 3s linear 0s infinite;
      margin: 5px 10px;
    }
    p {
      // text-align: center;
      font-size: 14px;
      // color: #222;
    }
    div.toPlay {
      width: 40px;
      height: 40px;
      position: relative;
      margin: 5px 10px;
      // display: flex;
      canvas {
        position: absolute;
      }
      .btn::after {
        content: "";
        display: block;
        width: 5px;
        height: 13px;
        border-left: 4px solid #fff;
        border-right: 4px solid #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .fullScreen {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    height: 100vh;
    // background: #48504c;
    background: linear-gradient(to top, rgb(102, 165, 135), rgb(65, 160, 114));
    z-index: 30;
    // img.bgg {
    //   width: 100%;
    //   height: 1;
    //   position: absolute;
    // }
    .back {
      width: 30px;
      height: 30px;
      background-image: url("../assets/img/goback.png");
      background-repeat: no-repeat;
      background-size: 25px 25px;
    }
    .middle {
      padding: 10px 30px;
      text-align: center;
      img {
        display: block;
        margin: 0px auto;
        width: 250px;
        border-radius: 50%;
      }
      div.txt {
        h2 {
          font-weight: 500;
        }
      }
    }
    .Lyric {
      height: 20vh;
      overflow: hidden;
      margin: 20px 0;
      color: #ddd;
      ul {
        // height: 20vh;
        text-align: center;
        transform: translateY(60px);
        li {
        }
      }
    }
    .lyricLight {
      color: #135e39;
      font-size: 18px;
      line-height: 23px;
      padding-top: 5px;
    }
    .control {
      input[type="range"] {
        width: 100%;
        outline: none;
        -webkit-appearance: none; /*清除系统默认样式*/
        width: 100% !important;
        background: -webkit-linear-gradient(#83ccae, #5faa81) no-repeat, #ddd; /*背景颜色，俩个颜色分别对应上下，自己尝试下就知道了嗯*/
        // background-size: 33% 100%; /*设置左右宽度比例*/
        height: 3px;
      }
      /*拖动块的样式*/
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; /*清除系统默认样式*/
        height: 10px; /*拖动块高度*/
        width: 14px; /*拖动块宽度*/
        background: #f8f9fa; /*拖动块背景*/
        // border-radius: 50%; /*外观设置为圆形*/
        border: solid 1px #ddd; /*设置边框*/
      }
      .btn {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 10px;
        a {
          display: block;
          width: 40px;
          height: 40px;
          background-repeat: no-repeat;
        }
        .mode {
          width: 35px;
          height: 35px;
          p.single {
            // display: block;
            width: 35px;
            height: 35px;
            background-image: url("../assets/img/single.png");
            background-repeat: no-repeat;
            background-size: 35px 35px;
          }
          p.rand {
            width: 35px;
            height: 35px;
            background-image: url("../assets/img/rand.png");
            background-repeat: no-repeat;
            background-size: 35px 35px;
          }
          p.list {
            width: 35px;
            height: 35px;
            background-image: url("../assets/img/order.png");
            background-repeat: no-repeat;
            background-size: 35px 35px;
          }
        }
        .working {
          display: flex;
          justify-content: space-around;
          align-items: center;
          // margin: 0 20px;
          flex: 1;
          .prev {
            background-image: url("../assets/img/prev.png");
            background-size: 40px 40px;
          }
          a.playing {
            // position: absolute;
            // content: "";
            display: block;
            width: 60px;
            height: 60px;
            background-image: url("../assets/img/play.png");
            background-size: 60px 60px;
          }
          .next {
            background-image: url("../assets/img/next.png");
            background-size: 40px 40px;
          }
        }
        .lis {
          a {
            background-image: url("../assets/img/songlist.png");
            background-size: 40px 40px;
          }
        }
      }
    }
  }
  div.pList {
    position: absolute;
    width: 100%;
    height: 80vh;
    right: 0px;
    bottom: 0px;
    // border-radius: 20px 20px 0 0;
    background-color: #1f1e1e;
    color: #fff;
    padding: 10px 0;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    p {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      padding: 0 15px;
      span {
        display: block;
        width: 20px;
        height: 20px;
        background-image: url("../assets/img/delete.png");
        background-repeat: no-repeat;
        background-size: 20px 20px;
      }
    }
    button {
      border: none;
      background: none;
      color: #fff;
      position: absolute;
      bottom: 10px;
      display: block;
      width: 30px;
      height: 30px;
      background-image: url("../assets/img/del.png");
      background-repeat: no-repeat;
      background-size: 30px 30px;
      margin-left: 50%;
      transform: translateX(-50%);
    }
  }
}
// }
.paused {
  .minBar {
    img {
      animation-play-state: paused;
    }
    div.toPlay {
      .btn::after {
        content: "";
        display: block;
        height: 0;
        width: 0;
        margin-right: -13px;
        border-color: transparent transparent transparent #fff;
        border-width: 7px 11px;
        border-style: solid;
        border-radius: 2px;
        position: absolute;
        // text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-14%, -50%);
      }
    }
  }
  .fullScreen {
    .cons {
      img {
        // animation-play-state: paused;
      }
    }
    .control {
      .btn {
        .working {
          a.plays {
            // position: absolute;
            // content: "";
            display: block;
            width: 60px;
            height: 60px;
            background-image: url("../assets/img/pause.png");
            background-size: 60px 60px;
          }
        }
      }
    }
  }
}
@keyframes rangImg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>